<template>
    <template v-for="(item, index) in bomData" :key="item.bomxq_id">
        <tr @click="handleToggle(item)" :class="{ 'table-row-hover': isRowHovered(item) }"
            @mouseenter="onRowMouseenter(item)" @mouseleave="onRowMouseleave(item)">
            <td :style="{ paddingLeft: getIndent(item) }">{{ generateIndex(item, index) }}</td>
            <td :style="{ paddingLeft: getIndent(item) }">
                <span v-if="hasChildren(item)">
                    <span @click.stop="handleToggle(item)" style="cursor: pointer; color: #007bff;">
                        <span v-if="!item.isOpen">+</span>
                        <span v-else>-</span>
                    </span>
                </span>
                {{ item.wl_name }}
            </td>
            <td :style="{ paddingLeft: getIndent(item) }">{{ item.wl_code || '无' }}</td>
            <td :style="{ paddingLeft: getIndent(item) }">{{ item.wl_xh || '无' }}</td>
            <td :style="{ paddingLeft: getIndent(item) }">{{ item.dw_name || '无' }}</td>
            <td :style="{ paddingLeft: getIndent(item) }">{{ item.bomxq_sl }}</td>
            <td :style="{ paddingLeft: getIndent(item) }">
                <button @click.stop="handleEdit(item)" class="action-button">编辑</button>
                <button @click.stop="handleRemove(item)" class="action-button">删除</button>
            </td>
        </tr>
        <template v-if="item.isOpen && hasChildren(item)">
            <BomTree :bomData="item.children" @toggle="handleToggle" @edit="handleEdit" @remove="handleRemove" />
        </template>
    </template>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';

const props = defineProps({
    bomData: {
        type: Array,
        default: () => []
    }
});

const emits = defineEmits(['toggle', 'edit', 'remove']);
const rowHover = ref({});

const hasChildren = (item) => {
    return item && item.children && item.children.length > 0;
};

// 优化后的生成序号方法
const generateIndex = (item, index, parentIndex = '', level = 0) => {
    const currentIndex = `${parentIndex ? `${parentIndex}.` : ''}${index + 1}`;
    if (hasChildren(item) && item.isOpen) {
        const children = item.children;
        for (let i = 0; i < children.length; i++) {
            generateIndex(children[i], i, currentIndex, level + 1);
        }
    }
    return currentIndex;
};

const handleToggle = (item) => {
    emits('toggle', item);
};

const handleEdit = (item) => {
    emits('edit', item);
};

const handleRemove = (item) => {
    emits('remove', item);
};

const getIndent = (item, level = 0) => {
    let current = item;
    while (current.parent) {
        level++;
        current = current.parent;
    }
    return `${level * 20}px`;
};

const isRowHovered = (item) => {
    return rowHover.value[item.bomxq_id];
};

const onRowMouseenter = (item) => {
    rowHover.value[item.bomxq_id] = true;
};

const onRowMouseleave = (item) => {
    rowHover.value[item.bomxq_id] = false;
};
</script>

<style scoped>
tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table-row-hover {
    background-color: #f0f9ff;
}

.action-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
}

.action-button:hover {
    background-color: #0056b3;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center; /* 添加这一行，使字体居中 */
}
</style>